<template>
	<view class="content">
		<view class="header">
			<u-navbar 
			:is-back="false"
			:border-bottom='false' 
			back-icon-color="#ffffff" 
			title-color="#ffffff" 
			:background="{background:'transparent'}" 
			back-text="" title="矿机商城"></u-navbar>
			<view class="header_top">
				<view class="lf">
					<view class="title">可用余额(USDT)</view>
					<view class="usdt">{{kjusdt}}</view>
				</view>
				<view class="lr">
					<view class="title">我的矿机(台)</view>
					<view class="usdt">{{sumtotal}}</view>
				</view>
			</view>
		</view>
		<view class="tag">
			<u-tabs
			height="60"
			:active-item-style='active' 
			bg-color="transparent" 
			:list="list" 
			bar-width="50%" 
			inactive-color="rgba(94, 106, 252,0.8)"
			active-color="#ffffff" 
			:is-scroll="false" 
			:current="current" 
			@change="change"></u-tabs>
		</view>
		<view class="item_one" v-if="current==0">
			<scroll-view class="scroll-view_H_C" scroll-y="true" @scrolltolower="scrollBtm">
			    <view class="item" v-for="item in miningList" :key="item.id">
			    	<view class="title">{{item.name}}</view>
			    	<view class="cont">
			    		<view class="top">
			    			<text>兑换金额/台</text>
			    			<text>产币周期</text>
			    			<text>每日产币</text>
			    		</view>
			    		<view class="btm">
			    			<text>{{item.price}}USDT</text>
			    			<text>{{item.userzhouqi}}</text>
			    			<text>{{item.meiribili}}</text>
			    		</view>
			    	</view>
			    	<view class="btm">
			    		<view class="lf">
			    			<text style="color: #999999;">兑换数量</text>
			    			<u-number-box 
			    			color="#6279f9" 
			    			bg-color="transparent" 
			    			v-model="item.num"></u-number-box>
			    		</view>
			    		<u-button 
			    		:hair-line="btnBorder" 
			    		class="submit" 
			    		@click='exchange(item.id,item.num)'>立即兑换</u-button>
			    	</view>
			    </view>
			    <view class="msg" :class="{order_null:miningList.length<=0}">
			    	<u-empty v-if="miningList.length<=0" text="暂无可兑换矿机" mode="list"></u-empty>
			    	<u-loadmore :status="status" />
			    </view>
			</scroll-view>
			
		</view>
		<view class="item_one item_two" v-else>
			<scroll-view class="scroll-view_H_C" scroll-y="true" @scrolltolower="scrollBtm">
			    <view class="item" v-for="item in MyList" :key="item.id">
			    	<view class="title">
			    		<text>{{item.minname}}</text>
			    		<text>{{item.status == 1?'运行中':'结束'}}</text>
			    	</view>
			    	<view class="cont">
			    		<view class="top">
			    			<text>矿机价值</text>
			    			<text>剩余产币周期</text>
			    			<text>每日产币</text>
			    		</view>
			    		<view class="btm">
			    			<text>{{item.price}}USDT</text>
			    			<text>{{item.shengyuzhouqi}}</text>
			    			<text>{{item.meiribili}}</text>
			    		</view>
			    	</view>
			    	<view class="btm">
			    		<view class="lf">
			    			<text>BST产出数量:{{item.freenum}}</text>
			    		</view>
			    		<u-button :hair-line="btnBorder" class="submit" @click="go">挖矿收益</u-button>
			    	</view>
			    </view>
			    <view class="msg" :class="{order_null:MyList.length<=0}">
			    	<u-empty v-if="MyList.length<=0" text="暂未购买矿机" mode="list"></u-empty>
			    	<u-loadmore :status="status" />
			    </view>
			</scroll-view>
			
		</view>
		<Nav :current='navActive'></Nav>
		<!--对话框-->
		<u-toast ref="uToast" />
		<u-modal show-cancel-button v-model="exchange_show" :content="exchange_content" @confirm="_exchange"></u-modal>
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue'
	export default {
		components:{
			Nav
		},
		data(){
			return{
				navActive:3,
				num:0,
				btnBorder:false,
				active: {
					border: '1px solid #5e6afc',
					backgroundColor:'#5e6afc',
					borderRadius: '12rpx'
				},
				list: [
					{name: '兑换矿机'}, 
					{name: '我的矿机'},
				],
				current: 0,
				page:1,//当前页码
				list_rows:10,//每页数量
				total:0,//数据总量
				status: 'loadmore',
				miningList:[],//兑换矿机列表
				MyList:[],//我的矿机列表
				exchange_show:false,//兑换矿机弹窗
				exchange_content:'确定兑换该矿机?',//
				id:null,//id
				num:null,//数量
				kjusdt:0,
				sumtotal:0,//我的矿机
			}
		},
		onReady() {
			
		},
		onLoad() {
			this.getUserInfo()
			this.getList()
			this.getMyList()
		},
		onPullDownRefresh(){
			this.miningList = []
			this.MyList = []
			this.page=1
			this.list_rows=10
			if(this.current == 0){
				this.getList()
			}else{
				this.getMyList()
			}
			this.getUserInfo()
		},
		onReachBottom(){
			
		},
		methods: {
			//上拉加载
			scrollBtm(){
				if(Math.ceil(this.total/this.list_rows)>this.page){
					this.page = this.page+1
					if(this.current == 0){
						this.getList()
					}else{
						this.getMyList()
					}
				}
			},
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:this.$api.user_getinfo,
					method:'POST',
					success:res=>{
						this.kjusdt = res.data.kjusdt
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			go(){
				uni.navigateTo({
				    url: '/pages/My/FundingDetails?current=2'
				});
			},
			//我的矿机
			getMyList(){
				this.status = 'loading'
				this.$http({
					url:this.$api.exchangelog_getAll,
					method:'POST',
					hideLoading:false,
					data:{page:this.page,list_rows:this.list_rows},
					success:res=>{
						this.total = res.data.total
						this.sumtotal = res.data.sumtotal
						res.data.data = res.data.data.map(item=>{
							item.num = 0
							return item
						})
						if(Math.ceil(this.total/this.list_rows)<=this.page){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
						this.MyList = this.MyList.concat(res.data.data)
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							
							this.status = 'nomore'
						}
					}
				})
			},
			//点击立即兑换
			exchange(id,num){
				this.id = id
				this.num = num
				if(num>0){
					this.exchange_show = true
				}else{
					this.$refs.uToast.show({
						title: '兑换数量有误',
						type: 'error'
					})
				}
				
			},
			_exchange(){
				this.$http({
					url:this.$api.exchangelog_exchange,
					method:'POST',
					data:{miningid:this.id,num:this.num},
					success:res=>{
						this.MyList = []
						this.page=1
						this.getMyList()
						this.getUserInfo()
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					}
				})
			},
			//切换tag
			change(index) {
				this.miningList = []
				this.MyList = []
				this.current = index;
				this.page=1
				if(index == 0){
					this.getList()
				}else{
					this.getMyList()
				}
			},
			//获取矿机列表
			getList(){
				this.status = 'loading'
				this.$http({
					url:this.$api.mining_getAll,
					method:'POST',
					hideLoading:false,
					data:{page:this.page,list_rows:this.list_rows},
					success:res=>{
						this.total = res.data.total
						res.data.data = res.data.data.map(item=>{
							item.num = 1
							return item
						})
						if(Math.ceil(this.total/this.list_rows)<=this.page){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
							
						}
						this.miningList = this.miningList.concat(res.data.data)
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							this.status = 'nomore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.header{
			background:url(../../static/zz.png)center/cover no-repeat;
			.header_top{
				text-align: center;
				display: flex;
				justify-content: center;
				padding: 30rpx 0 20rpx 0;
				box-shadow: 0 5rpx 5rpx rgba(62,9,149,1);
				color: #ffffff;
				.lr,.lf{
					margin: 0 80rpx;
				}
				.title{
					color:#999999;
				}
				.usdt{
					font-weight: 600;
					font-size: 18px;
				}
			}
		}
		.tag {
			margin:30rpx;
			border: 1px solid rgba(94, 106, 252,0.5);
			border-radius: 15rpx;
		}
		.item_one{
			.item{
				border: 1px solid $border-bottom-color;
				background-color: $border-bottom-color;
				border-radius: 10rpx;
				padding: 15rpx 20rpx;
				margin: 30rpx;
				.title{
					font-weight: 600;
					font-size: 18px;
					margin-bottom: 30rpx;
					color: #FFFFFF;
				}
				.cont{
					>view{
						display: flex;
						justify-content: space-between;
						color: $uni-font-color;
						text{
							width: 33.33%;
						}
						text:nth-child(2){
							text-align: center;
						}
						text:nth-child(3){
							text-align: right;
						}
					}
					.btm{
						color: #FFFFFF;
						
					}
				}
				.btm{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 16rpx 0;
					::v-deep .u-icon-disabled{
						background-color: transparent!important;
						color: #606aff!important;
					}
					::v-deep .uni-input-input{
						color: #FFFFFF;
						
					}
					::v-deep .u-number-input{
						width: 30rpx!important;
					}
					.lf{
						text{
							color:#FFFFFF;
							margin-right:15rpx ;
						}
					}
					.submit{
						height: 60rpx;
						background-color: #5c67ff;
						border-color: $border-bottom-color;
						color: #FFFFFF;
					}
				}
			}
			
		}
		.item_two{
			.item{
				.title{
					display: flex;
					justify-content: space-between;
					text:nth-child(2){
						font-size: 14px;
					}
				}
			}
		}
		.msg{
			padding: 20rpx;
		}
		.order_null{
			position: fixed;
			left: 0%;
			top: 50%;
			width: 100%;
		}
		.scroll-view_H_C{
			height: 65vh;
		}
	}
</style>